<template>
	<view>
		<view class="cu-card article" :class="isCard?'no-card':''" v-for="(item, index) in wordList">
			<view class="cu-item shadow" @click="gotoDetail(item.id)">
				<view class="title" :class="item.title ? '':'noTitle'">
					<view class="text-cut">{{item.title}}</view>
					<view class="text-number"><text>{{index + 1}}</text></view>
				</view>
				<view class="content">
<!-- 					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
					 mode="aspectFill"></image> -->
					<view class="desc">
						<view class="text-content"> {{item.summary}}</view>
						<view>
							<!-- TODO::评论的点赞数大于99，即神评论 -->
							<view v-if="item.commentPraiseCount > 99" class="cu-tag bg-red light sm round">有神评</view>
							<view class="cu-tag bg-green light sm round">史诗</view>
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="text-gray text-df">
						<text class="cuIcon-attentionfill margin-left margin-right-xs"></text> {{item.watchCount}}
						<text class="cuIcon-appreciatefill margin-left margin-right-xs"></text> {{item.praiseCount}}
						<text class="cuIcon-messagefill margin-left margin-right-xs" @click="gotoComment"></text> {{item.commentCount}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			wordList:{
				type: Array,
				default: []
			}
		},
		data() {
			return {
				isCard: '', // 是否是卡片样式
			};
		},
		methods:{
			// 跳转到评论
			gotoComment(item){
				uni.navigateTo({
					url: `/pages/comment/commentList?id=item.id`
				})
			},
			// 跳转详情
			gotoDetail(id){
				uni.navigateTo({
					url: `/pages/word/detail?id=${id}`
				})
			}

		}
	}
</script>

<style lang="less" scoped>
.text-number{
	width: 40rpx;
	height: 40rpx;
	// background-color: #1cbbb4;
	background-color: #e03997;
	border-radius: 50%;
	text{
		font-size: 28rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.noTitle{
	height: 30rpx;
}
.title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.text-content{
	margin-bottom: 10rpx;
}
.comment{
	margin-top: 20rpx;
	margin-right: 30rpx;
	display: flex;
	flex-direction: row-reverse;
}
/deep/ .cu-tag,.sm{
	padding: 20rpx 14rpx;
}

</style>
